<template>
 <div>
    <v-header :seller="seller"></v-header>
   

     <div class="tab">
   <div class="tab-item">
        <li>
       <router-link to="/goods" class="tab-a">商品</router-link>
        </li>
      </div>

      <div class="tab-item">
        <li>
         <router-link to="/ratings" class="tab-a">评论</router-link>
       </li>
      </div>

      <div class="tab-item">
        <li>
         <router-link to="/seller" class="tab-a">店家</router-link>
       </li>
      </div>

     </div>

     <router-view></router-view>

    </div>
</template>

<script>
 import header from './components/header/Header.vue'

 const ERR_OK = 0;

export default {
  name: 'App',
  data() {
    return {
      seller: {}
    }
  },
  created() {
  this.$http.get('/api/seller').then((response) => {
     response = response.body
     if(response.errno === ERR_OK) {
         this.seller = response.data 
         console.log(this.seller)
     }
  })

  },

   components: {
    'v-header': header


   }

}
</script>

<style rel="styleheet/stylus" scoped>

  .tab {
    display: flex;
    width:100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid rgba(7,17,24,0.05)
}

.tab-item {
    flex: 1;
    text-align: center;

}

.tab-a {
  display: block;
  font-size: 16px;
  color: rgb(77,85,93);
}

.tab-a:hover {
  color: red;
  font-weight: 700;
}

.tab-a:active {
 color: pink;
}

</style>
